<template>
  <div class="content">
    <div class="invite-box">
      <div class="index-header no-fix no-bg">
        <div @click="$router.back(-1)" class="back">
          <van-icon name="arrow-left"/>
        </div>
        <router-link :to="{name:'inviteMore'}" class="header-right">明细</router-link>

        <div class="title">推广收益</div>
      </div>

      <div class="invite-title">账户余额（元）</div>
      <div class="invite-money">{{info.distribut_money}}</div>

    </div>

    <div class="invite-code-box">
      <span class="pull-left">推荐码</span>
      <span class="pull-right">{{info.invite_code}}</span>
    </div>

    <a @click="copy" class="invite-btn" id="copy" :data-clipboard-text="info.invite_code">点击复制用户推荐码</a>

    <div class="btn-box">
      <van-action-sheet v-model="show" title="选择提现至" :actions="actions" @select="onSelect" />

      <van-button type="info" class="btn-primary" @click="refund">提   现</van-button>
    </div>
  </div>
</template>

<script>
  import Clipboard from 'clipboard'

  export default {
    name: "invite",
    components: {

    },
    data() {
      return {
          show:false,
        info:[],

          actions: [
          ]
      }
    },
    computed: {},
    mounted: function () {
      this.init();
    },
    methods: {
      init(){
          this.$api.member.index().then(res=>{
              var res=res.data;

              this.info=res.data;
          });
      },

        //复制
        copy(){
            var _this = this;
            var clipboard = new Clipboard("#copy");

            clipboard.on('success', e => {
                _this.$toast("复制成功！");
                // 释放内存
                clipboard.destroy()
            })
            clipboard.on('error', e => {
                // 不支持复制
                _this.$toast("该浏览器不支持自动复制！");
                // 释放内存
                clipboard.destroy()
            })
        },

        //提现
        refund(){
          var that=this;

            this.actions=[];

          if(that.info.alipay_user=="" && that.info.wechat_user==""){
              that.$dialog.confirm({
                  title: '提现',
                  message: '您还没有绑定微信或支付宝账号，是否立即去绑定'
              }).then(() => {
                  that.$router.replace({
                      name: 'UserInfoUpdate',
                  });
              }).catch(() => {
                  // on cancel
              });
              return false;
          }

            if(that.info.distribut_money<=0){
                that.$toast("当前账户余额不足！");
                return false;
            }

            if(that.info.alipay_user!=""){
                this.actions.push({ name: '支付宝账号',value:"alipay" })
            }

            if(that.info.wechat_user!=""){
                this.actions.push({ name: '微信账号',value:"wechat" })
            }

          this.show=true;

        },

        onSelect(v){
            var that=this;

            that.$dialog.confirm({
                title: '提现',
                message: '您确认把所有余额提现至【'+v.name+'】吗？'
            }).then(() => {

                that.$api.member.userRefund({pay_type:v.value}).then(res=>{
                    var res=res.data;

                    if(res.status){
                        that.$toast(res.msg);
                        that.init();
                    }else{
                        that.$toast(res.msg);
                    }
                });
                that.show=false;
            }).catch(() => {
                // on cancel
            });

        }
    },
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/scss/user.scss";
</style>
